<template>
	<el-backtop :bottom="60"></el-backtop>
	<el-container class="home-container">
		<!--头部布局-->
		<el-header>
			<div>
				<!-- <img src="../assets/logo.png" alt class="logo_img" /> -->
				<span>MBTI测试系统 v1.0</span>
			</div>
			<el-button type="info" @click="logout">退出</el-button>
		</el-header>
		<el-container>
			<!--侧边布局-->
			<el-aside :width="isCollapse ?'64px':'200px'">
				<!--伸缩按钮-->
				<div class="toggle-button" @click="toggleCollapase">收！</div>
				<el-menu background-color="#545c64" text-color="#fff" active-text-color="#409eff" unique-opened
					:collapse="isCollapse" :collapse-transition="false" :router="true" :default-active="$route.path">
					<!-- 欢迎界面 -->
					<el-menu-item index="/welcome" key="0">
						<i class="el-icon-s-home"></i>
						<template #title>欢迎</template>
					</el-menu-item>
					<!-- 问卷 -->
					<el-menu-item index="/testing" key="1">
						<i class="el-icon-edit"></i>
						<template #title>开始测试</template>
					</el-menu-item>
					<!-- 查询表格 -->
					<el-menu-item v-if="auth == true" index="/search" key="2">
						<i class="el-icon-tickets"></i>
						<template #title>查询个人结果--List</template>
					</el-menu-item>
					<!-- 查询班级可视化 -->
					<el-menu-item v-if="auth == true" index="/class" key="3">
						<i class="el-icon-picture"></i>
						<template #title>查询班级结果--Picture</template>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<!--主体布局-->
			<el-main>
				<!--路由占位符-->
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>

</template>

<script>
	export default {
		data() {
			return {
				// 左侧菜单
				menuList: [],
				isCollapse: false,
				auth:false,
			}
		},
		created() {
			if (window.sessionStorage.getItem('Auth') == 1){
				this.auth = true;
			}
			console.log(window.sessionStorage.getItem('Auth'))
			console.log(this.auth)
		},
		methods: {
			logout() {
				window.sessionStorage.clear();
				this.$router.push("/");
			},
			// 切换菜单折叠与展开
			toggleCollapase() {
				this.isCollapse = !this.isCollapse;
			},
		}
	};
</script>

<style lang="less" scoped>
	.el-header {
		background-color: #373d41;
		display: flex;
		justify-content: space-between; // 左右贴边
		padding-left: 0%; // 左边界
		align-items: center; // 水平
		color: #fff;
		font-size: 20px;

		>div {
			//左侧div加布局
			display: flex;
			align-items: center;

			span {
				margin-left: 15px;
			}
		}
	}

	.el-aside {
		background-color: #333744;

		.el-menu {
			border-right: none; // 对其右边框
		}
	}

	.el-main {
		background-color: #eaedf1;
	}

	.home-container {
		height: 100%;
	}

	.logo_img {
		width: 20%;
		height: 100%;
	}

	.iconfont {
		margin-right: 10px;
	}

	.toggle-button {
		background-color: #4A5064;
		font-size: 10px;
		line-height: 24px;
		color: #fff;
		text-align: center;
		letter-spacing: 0.2em;
		cursor: pointer; // 显示鼠标指针为：小手
	}
</style>
